<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript测试</title>
</head>
<style>
    body {
        height: 800px;
    }
    
    #myDiv1 {
        background-color: #ccc;
        height: 700px;
    }
    
    #myDiv {
        background-color: red;
        height: 100px;
        width: 100px;
    }
</style>

<body>
    <div id="myDiv">
        测试
    </div>
    <div>
        <div>
            <p>测试1</p>
        </div>
        <p>测试2</p>
    </div>

    <div id="myDiv1" onclick="click">
        <input id="myBtn" type="button" value="你好" />
        <input type="button" value="Click Me" onclick="alert(event.type)" />
    </div>
    <script>
        var EventUtil = {
            addHandler: function(element, type, handler) {
                if (element.addEventListener) {
                    element.addEventListener(type, handler, false);
                } else if (element.attachEvent) {
                    element.attachEvent("on" + type, handler);
                } else {
                    element["on" + type] = handler;
                }
            },
            getEvent: function(event) {
                return event ? event : window.event;
            },
            getTarget: function(event) {
                return event.target || event.srcElement;
            },
            preventDefault: function(event) {
                if (event.preventDefault) {
                    event.preventDefault();
                } else {
                    event.returnValue = false;
                }
            },
            removeHandler: function(element, type, handler) {
                if (element.removeEventListener) {
                    element.removeEventListener(type, handler, false);
                } else if (element.detachEvent) {
                    element.detachEvent("on" + type, handler);
                } else {
                    element["on" + type] = null;
                }
            },
            stopPropagation: function(event) {
                if (event.stopPropagation) {
                    event.stopPropagation();
                } else {
                    event.cancelBubble = true;
                }
            },
            getRelatedTarget: function(event) {
                if (event.relatedTarget) {
                    return event.relatedTarget;
                } else if (event.toElement) {
                    return event.toElement;
                } else if (event.fromElement) {
                    return event.fromElement;
                } else {
                    return null;
                }
            },
        };
        // EventUtil.addHandler(window, "load", function(event) {
        //     alert("欢迎");
        // });
        // EventUtil.addHandler(window, "unload", function(event) {
        //     alert("Unloaded");
        // });

        // EventUtil.addHandler(window, "resize", function(event) {
        //     alert("Resized");
        // });

        // EventUtil.addHandler(window, "scroll", function(event) {
        //     //console.log(document.compatMode);
        //     var a = 1;
        //     if (document.compatMode == "CSS1Compat") {
        //         a += 1;
        //         console.log(a);
        //         // alert(document.documentElement.scrollTop);
        //     } else {
        //         alert(document.body.scrollTop);
        //     }
        // });
        // var div = document.getElementById("myDiv");
        // EventUtil.addHandler(div, "click", function(event) {
        //     //alert(enent);
        //     event = EventUtil.getEvent(event);
        //     alert("Client coordinates: " + event.clientX + "," + event.clientY);
        // });
        // EventUtil.addHandler(div, "click", function(event) {
        //     event = EventUtil.getEvent(event);
        //     alert("Page coordinates: " + event.pageX + "," + event.pageY);
        // });
        //页面坐标位置
        // var div = document.getElementById("myDiv");
        // EventUtil.addHandler(div, "click", function(event) {
        //     alert(event);
        //     event = EventUtil.getEvent(event);
        //     var pageX = event.pageX,
        //         pageY = event.pageY;
        //     if (pageX === undefined) {
        //         pageX = event.clientX + (document.body.scrollLeft ||
        //             document.documentElement.scrollLeft);
        //     }
        //     if (pageY === undefined) {
        //         pageY = event.clientY + (document.body.scrollTop ||
        //             document.documentElement.scrollTop);
        //     }
        //     alert("Page coordinates: " + pageX + "," + pageY);
        // });
        //屏幕坐标位置
        // var div = document.getElementById("myDiv");
        // EventUtil.addHandler(div, "click", function(event) {
        //     event = EventUtil.getEvent(event);
        //     alert("Screen coordinates: " + event.screenX + "," + event.screenY);
        // });

        // var div = document.getElementById("myDiv");
        // EventUtil.addHandler(div, "click", function(event) {
        //     event = EventUtil.getEvent(event);
        //     var keys = new Array();
        //     if (event.shiftKey) {
        //         keys.push("shift");
        //     }
        //     if (event.ctrlKey) {
        //         keys.push("ctrl");
        //     }
        //     if (event.altKey) {
        //         keys.push("alt");
        //     }
        //     if (event.metaKey) {
        //         keys.push("meta");
        //     }

        //     console.log(keys.join(","));
        //     // alert("Keys: " + keys.join(","));
        // });

        var div = document.getElementById("myDiv");
        EventUtil.addHandler(div, "mouseout", function(event) {
            event = EventUtil.getEvent(event);
            var target = EventUtil.getTarget(event);
            var relatedTarget = EventUtil.getRelatedTarget(event);
            alert("Moused out of " + target.tagName + " to " + relatedTarget.tagName);
        });
    </script>
</body>

</html>